<template>
  <div class="box">
    <div class="button_box">
      <button @click="$router.replace('/')">返回首页</button>
      <button @click="back">返回上一页({{ Countdown }})</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, onMounted, onUnmounted } from "vue";
import router from "@/router";

defineComponent({
  name: "404"
});

const Countdown = ref(5)
const back = () => {
  router.go(-1)
}
let timer: null | number = null

onMounted(() => {
  timer = setInterval(() => {
    Countdown.value--
    if (Countdown.value <= 0) {
      back()
      timer && clearInterval(timer)
      router.replace("/")
    }
  }, 1000)
})

onUnmounted(() => {
  timer && clearInterval(timer)
})

</script>

<style lang="scss" scoped>
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: url("@/assets/images/404.jpg") no-repeat;
  background-size: 100% 100%;

  .button_box {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translateX(-50%);
    text-align: center;

    button {
      margin: 0 10px;
      border: 0;
      color: #409EFF;
      font-size: 1.5vmax;
      background-color: transparent;
      cursor: pointer;
    }
  }
}
</style>